// 店铺
import React, { useState } from "react"
import style from './shop.module.css'
import { Chat, ArrowLeft } from '@react-vant/icons';
import { Tabs } from 'react-vant'
import { useNavigate } from "react-router-dom";
import { Cell, Image } from 'react-vant'
const shop = () => {
    const [flag, setFlag] = useState(true)
    const navigate = useNavigate()
    const items = [
        {
            name: '全部商品',
        },
        {
            name: '分类查看',
        }

    ]
    const list = [
        { name: '新品上架', img: "https://tse3-mm.cn.bing.net/th/id/OIP-C.lpLtQKS_X_KmwR1UB5ityQHaED?rs=1&pid=ImgDetMain" },
        { name: '手机游戏', img: "https://img.3dmgame.com/uploads/images/news/20210609/1623244399_105617.jpg" },
        { name: '网络游戏', img: "https://img1.jiemian.com/101/original/20171201/151212291834539000.jpg" },
        { name: '魅道易通卡', img: "https://tse4-mm.cn.bing.net/th/id/OIP-C.MJ5KrV8cPVyxnOJ602msZAHaEK?rs=1&pid=ImgDetMain" },
    ]
    
    const handelGan = () => {
        setFlag(false)
    }
    const handelYi = () => {
        setFlag(true)
    }
    return <>

        <div className={style.box}>
            <ArrowLeft className={style.arrleft} onClick={() => navigate('/productDetails')} />
            <div className={style.boxbor}>
                <div className={style.boximg}>

                </div>
                <h4 className={style.font}>子墨无敌店 </h4>
                <div className={style.boxthre}>
                    <div className={style.chat} onClick={()=>navigate('/Zin/information')}><Chat  /><p>客服</p></div>
                    {
                        flag ?
                            <div className={style.gan} onClick={() => handelGan()}>+关注</div>
                            :
                            <div className={style.gan} onClick={() => handelYi()}>√已关注</div>

                    }
                </div>
                <hr />
                <Tabs defaultActive={2}>
                    {items.map(item => (
                        <Tabs.TabPane key={item} title={item.name}>
                            {/* {item.shop.map((i)=>{
                            {i.m}
                           })} */}
                            {
                                item.name == '全部商品' ?
                                    <div className={style.boxall}>
                                        <p>默认</p>
                                        <p>新品</p>
                                        <p>销量</p>
                                        <p>价格</p>
                                    </div>
                                    :
                                    list.map((i, index) => {
                                        return <Cell
                                            center
                                            key={index}
                                            title={i.name}
                                            style={{ height: '64px' }}
                                            label='Deserunt dolor ea eaque eos'
                                            icon={<Image width={55} height={44} src={i.img} round />}
                                            isLink
                                        />

                                    })


                            }

                        </Tabs.TabPane>
                    ))}
                </Tabs>

            </div>
        </div>
    </>
}

export default shop